<template>
  <!--图模块  -->
  <el-carousel indicator-position="none">
    <el-carousel-item v-for="item in xbarData" :key="item.name">
      <div class="item-header">
        <span>
          {{item.name}}
        </span>
      </div>
      <div class="item-content">
        <div class="echarts-item"></div>
      </div>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
  import * as echarts from "echarts";
  export default {
    props: {
      xbarData: {
        default: () => [],
      }
    },
    data() {
      return {
        // myCharts: [], // 地图容器
      };
    },
    watch: {
      xbarData: {
        deep: true,
        handler(newdata) {
          this.$nextTick(() => {
            this.getMychartOne(newdata);
          })

        }
      },
    },
    mounted() {

    },
    methods: {
      getMychartOne(newdata) {
        const self = this;
        for (let index = 0; index < newdata.length; index++) {
          // 1.实例化对象
          const myChart = echarts.init(document.getElementsByClassName('echarts-item')[index]);
          // self.myCharts.push(myChart);
          // myChart.showLoading();
          // 2.指定配置和数据
          let option = {
            color: ["#2680EB"],
            tooltip: {
              trigger: "axis",
              formatter: function (params, ticket, cb) {
                let tipString = params[0].seriesName + "<br />";
                tipString +=params[0].marker+ params[0].axisValue + '实际' + '：' + params[0].value + '<br />';
                tipString +=params[1].marker+ params[1].axisValue + '：' + params[1].value + '<br />';
                return tipString;
              },
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
              },
            },
            grid: {
              left: "5%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: [{
              type: "value",
              axisTick: {
                show: false, // 去除刻度线
              },
              splitLine: {
                show: false
                // 虚线
                // lineStyle: {
                //   type: 'dashed',
                //   color:'#666'
                // }
              },
              // 修改刻度标签 相关样式
              axisLabel: {
                color: "#fff",
                fontSize: "14px",
              },
              // name: "个",
              min: 0,
              position: "left",
              axisLine: {
                show: false,
              }
            }, ],
            yAxis: [{
                type: "category",
                data: [],
                axisTick: {
                  alignWithLabel: true,
                  show: false,
                },
                // 修改刻度标签 相关样式
                axisLabel: {
                  color: "#fff",
                  fontSize: "14px",
                },
                // 显示y坐标轴的样式
                axisLine: {
                  show: true,
                },
              },
              {
                data: [],
                type: "category",
                inverse: true,
                // 不显示y轴的线
                axisLine: {
                  show: false
                },
                // 不显示刻度
                axisTick: {
                  show: false
                },
                // 把刻度标签里面的文字 上方展示
                axisLabel: {
                  show: false
                }
              }
            ],

            series: [{
                name: "",
                type: "bar",
                emphasis: {
                  focus: "series", // series淡出范围为系列
                },
                // 柱子宽度
                barWidth: "70%",
                data: [],
                itemStyle: {
                  // barBorderRadius: 5, // 修改柱子圆角
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 1,
                    [{ // 渐变色 LineraGradient 5版本会报错建议4 npm install echarts@4.9.0 --save
                        offset: 0,
                        color: "rgb(2,127,198,1)",
                      },
                      {
                        offset: 1,
                        color: "rgb(3,140,116,1)",
                      },
                    ]),
                },
                barGap: "0%", // 柱子之间缝隙
              },
              {
                name: "",
                type: "bar",
                barCategoryGap: 50,
                barWidth: '70%',
                yAxisIndex: 1,

                data: [],
                itemStyle: {
                  color: "rgba(18,41,82,.2)",
                  borderColor: "#00c1de",
                  borderWidth: 1,
                  barBorderRadius: 5
                }
              }
            ],
          };



          newdata[index].data.forEach((e) => {
            option.yAxis[0].data.unshift(e.key);
            option.yAxis[1].data.push(e.key + "预设");
            option.series[0].data.unshift(e.value)
            option.series[1].data.push(e.presets);
          });
          option.series[0].name = newdata[index].name;
          // 3.把配置给实例对象
          myChart.setOption(option);

          // 4. 自适应
          window.addEventListener("resize", function () {
            myChart.resize();
          });

        }

      }
    }
  };

</script>
<style lang="scss" scoped>
  .el-carousel {
    width: 100%;
    height: 100%;
    background: transparent;

    .el-carousel__item {
      display: flex;
      flex-direction: column;
      padding: 10px 10px;

      .item-header {
        /*margin: 5px 0 0 10px;*/

        span:first-child {
          padding-bottom: 8px;
          font-size: 20px;
          color: #fff;
          border-bottom: 2px solid #faf5f5;
        }
      }
    }

    .item-content {
      flex: 1;
      width: 100%;
      position: relative;
      bottom: 20px;

      .echarts-item {
        width: 100%;
        height: 100%;
      }
    }
  }

</style>
